<#include '../header.ftl'>

<link rel="stylesheet" href="/css/login.css" >

<style>
    body {
        background-color: rgb(242, 242, 242);
    }

    @media screen and (max-width: 768px) {

    }
</style>

<main class="layadmin-user-login layadmin-user-display-show">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header cc_cursor">
            <h2>找回密码</h2>
            <p>创客实验室——成果管理系统</p>
        </div>
        <form class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <input type="hidden" name="flag" value="true">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="login-username"></label>
                <input type="text" name="username" id="login-username" lay-verify="required" placeholder="用户名"
                       class="layui-input" value="">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="login-code"></label>
                        <input type="text" name="code" id="email-code" lay-verify="required" placeholder="邮箱验证码" class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <button type="button" class="layadmin-user-login-codeimg layui-btn layui-btn-sm layui-btn-primary"
                                    style="height: 36px" id="getEmailCode">获取邮箱验证码</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="login-password"></label>
                <input type="password" name="password" id="login-password" lay-verify="required" placeholder="密码"
                       class="layui-input" value="">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="login-check-password"></label>
                <input type="password" name="checkPassword" id="login-check-password" lay-verify="required" placeholder="确认密码"
                       class="layui-input" value="">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn  layui-btn-normal layui-btn-fluid" lay-submit lay-filter="forget-submit">确  认</button>
            </div>
        </form>
    </div>
    <div class="layui-trans layadmin-user-login-footer">
        <p>© 2020 成果管理系统</p>
    </div>

    <script type="text/javascript">
        layui.use(['element', 'form', 'layer'], function () {
            const element = layui.element
                  , form = layui.form
                  , layer = layui.layer;
            $('#getEmailCode').click(function () {
                let $input = $('input[name="username"]');
                let username = $input.val()
                if (username === undefined || username === "") {
                    $input.focus().addClass("layui-form-danger")
                    layer.msg('用户名不能为空', {
                        icon: 2,
                        time: 1500,
                        anim: 6
                    }, function(){
                        $input.removeClass("layui-form-danger")
                    });
                    return;
                }
                let time = 59;
                $('#getEmailCode').attr('disabled', true).addClass('layui-btn-disabled').html(time + 1 + '秒后可重新获取');
                const intervalID = setInterval(function () {
                    if (time <= 0) {
                        $('#getEmailCode').attr('disabled', false)
                            .removeClass('layui-btn-disabled')
                            .html('获取邮箱验证码');
                        clearInterval(intervalID)
                    } else {
                        $('#getEmailCode').html(time-- + '秒后可重新获取');
                    }
                }, 1000)
                const loadIndex = layer.load()
                $.get('/email/get?username=' + username, function (data) {
                    layer.close(loadIndex)
                    if (data.success) {
                        layer.msg("请检查邮箱！")
                    } else {
                        $('#getEmailCode').attr('disabled', false)
                            .removeClass('layui-btn-disabled')
                            .html('获取邮箱验证码');
                        clearInterval(intervalID)
                        layer.msg(data.msg);
                    }
                })
            })

            form.render();

            form.on('submit(forget-submit)', function (obj) {
                const data = obj.field
                if (data.checkPassword !== data.password) {
                    let $checkPasswordInput = $('input[name="checkPassword"]');
                    $checkPasswordInput.focus().addClass("layui-form-danger")
                    layer.msg('俩次密码不一致', {
                        icon: 2,
                        time: 1500,
                        anim: 6
                    }, function(){
                        $checkPasswordInput.removeClass("layui-form-danger")
                    });
                    return ;
                }
                const loadIndex = layer.load()
                $.post('/user/findPassword', data, function (result) {
                    layer.close(loadIndex)
                    if (result.success) {
                        layer.msg('更新成功！')
                        window.location.href = '/'
                    } else {
                        layer.msg(layer.msg, {
                            icon: 2,
                            time: 1500,
                            anim: 6
                        });
                    }
                })
                return false;
            });

        })
    </script>

</main>
</body>
</html>